<h2 mat-dialog-title>{{ (data ? '::EditBook' : '::NewBook' )| abpLocalization }}</h2>
<mat-dialog-content>
  <form [formGroup]="form" class="form-container">
    <mat-form-field class="w-100">
      <mat-label>{{'::Author' | abpLocalization}}<span> * </span></mat-label>
      <mat-select id="author-id" formControlName="authorId" autofocus>
        <mat-option [value]="author.id"  *ngFor="let author of authors$ | async">{{ author.name }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field class="w-100">
      <mat-label>{{'::Name' | abpLocalization}} <span> * </span></mat-label>
      <input type="text" id="book-name" matInput formControlName="name">
    </mat-form-field>

    <mat-form-field class="w-100">
      <mat-label>{{'::Price' | abpLocalization}} <span> * </span></mat-label>
      <input type="number" id="book-price" matInput formControlName="price">
    </mat-form-field>

    <mat-form-field class="w-100">
      <mat-label>{{'::Type' | abpLocalization}}<span> * </span></mat-label>
      <mat-select id="book-type" formControlName="type">
        <mat-option [value]="type.value" *ngFor="let type of bookTypes">{{ '::Enum:BookType:' + type.value | abpLocalization }}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field class="w-100">
      <mat-label>{{'::PublishDate' | abpLocalization}} <span> * </span></mat-label>
      <input matInput [matDatepicker]="picker" formControlName="publishDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

  </form>

</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button  mat-dialog-close>{{ '::Close' | abpLocalization }}</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="getFormValue()"> {{'::Save' | abpLocalization}}</button>
</mat-dialog-actions>
